

<template>
  <view class="Mall4j wallet-container">
    <!-- 余额 -->
    <view class="wallet-info">
      <view class="w-banner">
        <view class="w-tit">{{ i18n.totalBalance }}</view>
        <view class="w-num">{{ wxs.toPrice(balance) }}</view>
      </view>
      <view class="recharge-btn">
        <view class="btn" @tap="toRechargeBalance">{{ i18n.recharge }}</view>
      </view>
    </view>
    <!-- 明细 -->
    <view class="wallet-detail">
      <view class="det-tit">{{ i18n.balanceDetails }}</view>
      <view class="det-list">
        <view v-for="(item,index) in walletList" :key="index" class="det-item">
          <view class="det-lt">
            <image class="banner-icon" src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/make-integral.png" />
            <view class="det-content">
              <!-- type 1:充值 2:赠送 3:支付 4:退款 -->
              <view class="content">{{ ['',i18n.rechargeBalance,i18n.rechargeGift,i18n.shoppingConsumption,i18n.refund,i18n.platformModification,i18n.buyMembership][item.type] }}</view>
              <view class="date">({{ item.createTime }})</view>
              <view v-for="(orderId,index) in item.orderNumberList" :key="index" class="order-number">{{ i18n.orderNumber }}:{{ orderId }}</view>
            </view>
          </view>
          <view class="det-rt">
            <text :class="item.ioType == 0 ? 'gray' : 'red'">{{ ['-','+'][item.ioType] }}{{ item.changeBalance }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 空 -->
    <empty v-if="walletList.length==0" />
    <!-- 加载完成 -->
    <view v-if="walletList.length > 8 && loadAll" class="all-load">{{ i18n.endTips }}</view>
  </view>
</template>

<script module="wxs" lang="wxs" src="../../wxs/number.wxs"></script>

<script>
var http = require("../../utils/http.js");
import empty from "../../components/empty-tips/index.vue";

export default {
  data () {
    return {
      balance: 0,
      walletList: [],
      current: 1,
      size: 20,
      pages: 1,
      loadAll: false,
    }
  },

  components: {
    empty
  },

  computed: {
    i18n () {
      return this.$t('index')
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if (options.rechargeSuccess == '1') {
      uni.showModal({
        title: this.i18n.tips,
        content: this.i18n.paymentSuccessful,
        showCancel: false
      })
    }
  },
  onShow: function () {
    uni.setNavigationBarTitle({
      title: this.i18n.balance
    })
    this.queryBalance() //请求余额
    this.queryWalletDetailed() //请求明细
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if (this.current < this.pages) {
      this.setData({
        current: this.current + 1
      })
      this.queryWalletDetailed()
    } else {
      this.setData({
        loadAll: true
      })
    }
  },

  methods: {
    /**
     * 请求余额
     */
    queryBalance: function () {
      var params = {
        url: '/p/userBalance/getBalanceInfo',
        method: 'GET',
        data: {},
        callBack: res => {
          this.balance = res
        }
      };
      http.request(params)
    },

    /**
     * 请求余额明细
     */
    queryWalletDetailed: function () {
      var params = {
        url: '/p/userBalanceLog/log',
        method: 'GET',
        data: {
          current: this.current,
          size: this.size
        },
        callBack: res => {
          this.walletList = res.current == 1 ? res.records : this.walletList.concat(res.records)
          this.pages = res.pages
          this.current = res.current
          console.log(this.walletList);
        }
      };
      http.request(params)
    },

    // 跳转余额充值
    toRechargeBalance: function () {
      uni.navigateTo({
        url: '/pages/recharge-balance/recharge-balance',
      });
    }

  }
}
</script>

<style>
@import "./my-wallet.css";
</style>
